<template>
  <div class="detail">
    <NavBar class="home-nav">
      <div slot="center">购物街</div>
    </NavBar>
    <SearchInput />

    <Scroll class="content">
      <Carsouel :list="pics" />

      <div class="goods_price">￥{{ GoodsInfo.goods_price }}</div>
      <div class="goods_name_row">
        <div class="goods_name">
          {{ GoodsInfo.goods_name }}
        </div>
        <div class="goods_collect">
          <div
            class="iconfont "
            @click="handleCollect"
          
            :class="isCollect? 'icon-shoucang1-copy':'icon-shoucang'"
          ></div>

          <div class="collect_text" :style="isCollect ? { color: 'red' } : {}">
            收藏
          </div>
        </div>
      </div>

      <div class="goods_info">
        <div class="goods_info_title">图文详情</div>
        <div class="goods_info_content">
          <!-- 富文本 -->
          <div v-html="GoodsInfo.goods_introduce"></div>
          <!-- <rich-text nodes="{{GoodsInfo.goods_introduce}}"></rich-text> -->
        </div>
      </div>
    </Scroll>
    <div class="tool">
      <div class="tool-item">
 <div
            class="iconfont icon-kefu"
  
          ></div>

        <p>客服</p>
      </div>
      <div class="tool-item">
       <div
            class="iconfont icon-fenxiang"
  
          ></div>
        <p>分享</p>
      </div>
      <div class="tool-item">
<div
            class="iconfont icon-gouwuche"
  
          ></div>
        <router-link to="/cart">购物车</router-link>
      </div>
      <button class="btn_cart" @click="handleCartAdd()">加入购物车</button>
      <button class="btn_buy">立即购买</button>
    </div>

    <div
      class="container"
      @click="show = false"
      v-show="show && picslength > 0"
    >
      <h2>{{ currentIndex + 1 }}/{{ picslength }}</h2>
      <div class="wrapper">
        <img :src="imgObj.pics_mid" alt="" style="width: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import requests from "@/api/ajax";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Detail",

  data() {
    return {
      id: "",
      GoodsInfo: {},
      show: false,
      currentIndex: 0,
      cartList: [],
      isCollect: false,
      collect: [],
      pics: [],
    };
  },
  computed: {
    picslength() {
      return this.pics.length;
    },

    imgObj() {
      return this.pics[this.currentIndex] || {};
    },

    goodsid() {
      return this.$route.query.goods_id || "";
    },
  },
  beforeMount() {
    this.collect = JSON.parse(sessionStorage.getItem("collect"))||[];
    this.id = this.$route.query.goods_id || "";
  },
  mounted() {
    this.getGoodsDetail(this.id);
    this.$bus.$on("preview", (index) => {
      console.log(index);
      this.show = true;
      this.currentIndex = index;
    });
  },

  methods: {
    handleCartAdd() {
      let cart = JSON.parse(sessionStorage.getItem("cart")) || [];
      this.$message.success("加入成功");
      let index = cart.findIndex((v) => v.goods_id === this.GoodsInfo.goods_id);
      console.log(index);
      if (index === -1) {
        //3  不存在 第一次添加
        this.$set(this.GoodsInfo, "num", 1);
        // this.GoodsInfo.num = 1;
        console.log("first");
        this.GoodsInfo.checked = true;
        cart.push(this.GoodsInfo);
      } else {
        // 4 已经存在购物车数据 执行 num++
        cart[index].num++;
        console.log(cart);
      }
      this.cartList = cart;
      // this.$store.state.cartList =this.cartList;
      sessionStorage.setItem("cart", JSON.stringify(cart)) || [];
    },
    handleCollect() {
      // 1 获取缓存中的商品收藏数组
      // let collect = JSON.parse(sessionStorage.getItem("collect")) || [];
      // 2 判断该商品是否被收藏过
      let index = this.collect.findIndex(
        (v) => v.goods_id === this.GoodsInfo.goods_id
      );
      // this.collect = collect;
      // 3 当index！=-1表示 已经收藏过
      if (index !== -1) {
        // 能找到 已经收藏过了  在数组中删除该商品
        this.collect.splice(index, 1);
        this.isCollect = false;
        this.$message.error("取消收藏");
      } else {
        // 没有收藏过
        this.collect.push(this.GoodsInfo);
        this.isCollect = true;
        this.$message.success("收藏成功");
      }
      sessionStorage.setItem("collect", JSON.stringify(this.collect)) || [];
    },
    //  const { goods_id } = options;
    async getGoodsDetail(goods_id) {
      const GoodsInfo = await requests({
        url: "/goods/detail",
        params: {
          goods_id,
        },
      });
      this.GoodsInfo = GoodsInfo.message;
      this.pics = GoodsInfo.message.pics;
      // let collect = JSON.parse(sessionStorage.getItem("collect"));
      // this.isCollect=collect.findIndex((v) => v.goods_id === this.GoodsInfo.goods_id)!=-1;
      // 2 判断当前商品是否被收藏
      this.isCollect = this.collect.some(
        (v) => v.goods_id === this.GoodsInfo.goods_id
      );
    },
  },
};
</script>

<style lang="less" scoped>
#detail {
  /*padding-top: 44px;//100%视口*/
  height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: 88px;
  bottom: 98px;
  left: 0;
  right: 0;
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  position: fixed;
  left: 0;

  top: 0;
  // width:100%;
  // height: 100%;
  right: 0;
  bottom: 0;
  background: #000;
  text-align: center;
  h2 {
    color: #fff;
  }
  .wrapper {
    margin-top: 20px;
  }
}

.goods_price {
  padding: 15px;
  font-size: 32px;
  font-weight: 600;
  color: var(--color-tint);
}
.goods_name_row {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  padding: 10px 0;
  display: flex;
  .goods_name {
    flex: 5;
    color: #000;
    font-size: 30rpx;
    padding: 0 10px;

    overflow: hidden;
  }
  .goods_collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #000;
  }
}

.tool {
  border: 1px solid #ccc;
  position: fixed;
  bottom: 49px;
  left: 0;
  width: 100%;
  height: 50px;

  background-color: #fff;
  display: flex;
  text-align: center;
  align-items: center;
}
a {
  display: block;
}
.tool-item {
  flex: 1;
}
button {
  width: 100%;
  height: 100%;
  color: #fff;
  flex: 2;
  font-weight: 600;
}
.btn_cart {
  background-color: #ffa500;
}
.btn_buy {
  background-color: #ff1e00;
}
</style>
